<template>
	<navigatorComp
		:title="isEdit ? '管理' : '更多信息'"
		bgcColor="#121512"
		fontColor="#fff"
	></navigatorComp>
	<view class="content">
		<view class="manageClan_info">
			<view class="display_flex" style="justify-content: flex-start">
				<view class="manageClan_imgBox">
					<image src="http://112.124.50.179:8888/imgs/home/clan_1.png" mode=""></image>
					<view
						:class="[
							'manageClan_imgText',
							newClanForm.genealogySurname.length === 2 && 'manageClan_fuxinText'
						]"
					>
						{{ newClanForm.genealogySurname }}氏家族
					</view>
				</view>
				<view class="manageClan_info_rightInfo">
					<view class="manageClan_info_name">
						{{ newClanForm.genealogySurname }}氏一家人
					</view>
					<view>始祖: {{ newClanForm.ancestorName }}</view>
					<!-- <view>祖籍地: {{ newClanForm.ancestralHomeland }}</view> -->
					<view>创建时间: {{ newClanForm.createTime }}</view>
				</view>
			</view>
		</view>
		<view class="createClan_inputBox">
			<u-form
				label-width="100"
				label-style="font-size:28rpx;color: #FFFFFF;"
				:model="newClanForm"
				ref="uForm"
			>
				<u-form-item label="祠堂名称:" prop="ancestorName">
					<u-input
						v-if="isEdit"
						v-model.trim="newClanForm.genealogyName"
						border="none"
						placeholder="请输入祠堂名称"
						clearable
						color="#fff"
						fontSize="28rpx"
						inputAlign="right"
					/>
					<view v-else class="clan_info_text">{{ newClanForm.genealogyName }}</view>
				</u-form-item>
				<u-form-item label="始祖名称:" prop="name">
					<u-input
						v-if="isEdit"
						v-model.trim="newClanForm.ancestorName"
						border="none"
						placeholder="请输入始祖名称"
						clearable
						color="#fff"
						fontSize="28rpx"
						inputAlign="right"
					/>
					<view v-else class="clan_info_text">{{ newClanForm.ancestorName }}</view>
				</u-form-item>
				<u-form-item :label="isEdit ? '成员管理:' : '查看成员:'">
					<view class="display_flex">
						<view
							class="placeHolder"
							v-if="isEdit"
							@click="
								goUrl(
									`/subPages/home/clan/manage_member?createUserId=${createUserId}&&genealogyId=${newClanForm.genealogyId}`
								)
							"
						>
							去管理
						</view>
						<image
							class="arrow_right"
							src="http://112.124.50.179:8888/imgs/home/arrow_right.png"
							mode=""
							@click="
								goUrl(
									`/subPages/home/clan/manage_member?createUserId=${createUserId}&&genealogyId=${newClanForm.genealogyId}`
								)
							"
						></image>
					</view>
				</u-form-item>
				<!-- <u-form-item label="祖籍地:" prop="address">
					<pickerAddress v-if="isEdit" @change="changeAddress">
						<view class="display_flex">
							<view :class="['placeHolder', newClanForm.ancestralHomeland && 'value']">
								{{ newClanForm.ancestralHomeland || '请选择' }}
							</view>
							<image class="arrow_right" src="http://112.124.50.179:8888/imgs/home/arrow_right.png" mode=""></image>
						</view>
					</pickerAddress>
					<view v-else class="clan_info_text">{{ newClanForm.ancestralHomeland }}</view>
				</u-form-item> -->
				<u-form-item
					label="族谱简介:"
					prop="summarized"
					labelPosition="top"
					labelWidth="300rpx"
				>
					<view class="createClan_inputBox_intro">
						<up-textarea
							v-if="isEdit"
							disableDefaultPadding
							placeholderClass="placeholderClass"
							v-model="newClanForm.summarized"
							placeholder="请输入简介"
							height="270rpx"
							border="none"
							count
							maxlength="200"
						></up-textarea>
						<view v-else class="clan_info_text">{{ newClanForm.summarized }}</view>
					</view>
				</u-form-item>
			</u-form>
		</view>
		<footerBtn
			v-if="isEdit"
			bgcColor="#121512"
			:btnDisable="btnDisable"
			name="保存"
			@clickBtn="handleSave"
		></footerBtn>
	</view>
</template>

<script setup>
import { onMounted, ref, reactive, nextTick, getCurrentInstance, watchEffect } from 'vue';
import { onLoad, onShow, onUnload } from '@dcloudio/uni-app';
import navigatorComp from '/components/navigator/index.vue';
import pickerAddress from '/components/picker/addressPicker.vue';
import footerBtn from '/components/footerBtn/index.vue';
import _ from 'lodash';
import HomeApi from '@/API/home/index.js';
const homeApi = new HomeApi();

// 按钮是否可以点击
const btnDisable = ref(true);
//传入表单
const clanForm = reactive({
	genealogyId: '', //族谱id
	frontCoverUrl: 1, //封面图片
	genealogyName: '',
	genealogySurname: '',
	ancestorName: '',
	// ancestralHomeland: '',
	summarized: '',
	createTime: ''
});
//新表单
const newClanForm = reactive({
	genealogyId: '', //族谱id
	frontCoverUrl: 1, //封面图片
	genealogyName: '',
	genealogySurname: '',
	ancestorName: '',
	// ancestralHomeland: '',\
	summarized: '',
	createTime: ''
});
const createUserId = ref(0); //创建族谱的id
const userId = uni.getStorageSync('userInfo').userId; //当前用户的id
const address = ref(''); //祖籍地临时存储

const isEdit = ref(true); //是否可以编辑

onLoad((options) => {
	clanForm.genealogyId = options.genealogyId;
	newClanForm.genealogyId = options.genealogyId;
	createUserId.value = options.createUserId; //创建的用户id

	if (options.createUserId == userId) {
		//如果是管理人员，就可以编辑
		isEdit.value = true;
	} else {
		//如果不是管理人员，就不可以编辑
		isEdit.value = false;
	}

	getGenealogyInfo();
});

/**
 * 获取族谱信息
 */
const getGenealogyInfo = () => {
	homeApi
		.getGenealogyInfo({
			genealogyId: newClanForm.genealogyId
		})
		.then((res) => {
			if (res.code === 0) {
				Object.keys(newClanForm).forEach((item) => {
					if (item != 'genealogyId') {
						clanForm[item] = res.data[item];
						newClanForm[item] = res.data[item];
					}
				});
				clanForm.painame = res.data.paiName;
				newClanForm.painame = res.data.paiName;
				// clanForm.ancestralHomeland = res.data.ancestralHomeland.replace(/,/g, '')
				// newClanForm.ancestralHomeland = res.data.ancestralHomeland.replace(/,/g, '')
				// address.value = res.data.ancestralHomeland.split(',');
			}
		});
};

watchEffect(() => {
	//如果修改了页面内容，按钮可以点击
	Object.keys(newClanForm).forEach((key) => {
		if (clanForm[key] != newClanForm[key]) {
			btnDisable.value = false;
		}
	});
});

/**
 * 选择祖籍地
 */
const changeAddress = (e) => {
	address.value = JSON.parse(JSON.stringify(e.data));
	clanForm.ancestralHomeland = e.data.join('');
};

const goUrl = (url) => {
	uni.navigateTo({
		url: url
	});
};

const handleSave = _.debounce(() => {
	saveClan();
}, 500);

/**
 * 保存祠堂
 */
const saveClan = () => {
	if (btnDisable.value) {
		return;
	}
	uni.showLoading();
	let params = {
		frontCoverUrl: newClanForm.frontCoverUrl,
		genealogyName: newClanForm.genealogyName,
		genealogySurname: newClanForm.genealogySurname,
		ancestorName: newClanForm.ancestorName,
		summarized: newClanForm.summarized,
		genealogyId: newClanForm.genealogyId,
		painame: newClanForm.painame,
		opType: 2 //（1:创建，2:修改）
	};
	homeApi.createGenealogy(params).then((res) => {
		if (res.code === 0) {
			uni.hideLoading();
			uni.showToast({
				title: '保存成功'
			});
		}
	});

	setTimeout(() => {}, 500);
};
</script>

<style lang="scss">
page {
	background-color: #121512;
	/* #ifdef H5 */
	padding-top: 0;
	/* #endif */
	box-sizing: border-box;
}

.content {
	padding: 0;
}

.manageClan_info {
	margin: 24rpx 32rpx;
	background: linear-gradient(225deg, #292b2a 0%, #8a918e 100%);
	border-radius: 8rpx 8rpx 8rpx 8rpx;
	box-sizing: border-box;
	padding: 32rpx 24rpx;
	margin-bottom: 24rpx;
	position: relative;

	.manageClan_imgBox {
		position: relative;
		margin-right: 32rpx;

		image {
			width: 168rpx;
			height: 240rpx;
		}

		.manageClan_imgText {
			font-family: '宋体';
			font-weight: 600;
			font-size: 30rpx;
			color: #000000;
			line-height: 32rpx;
			position: absolute;
			right: 20rpx;
			top: 20rpx;
			writing-mode: vertical-lr;
		}

		.manageClan_fuxinText {
			font-family: '宋体';
			font-weight: 600;
			font-size: 25rpx;
			color: #000000;
			top: 16rpx;
			right: 22rpx;
		}
	}

	.manageClan_info_rightInfo {
		height: 240rpx;
		padding: 4rpx 0 6rpx 0;
		box-sizing: border-box;
		font-weight: 400;
		font-size: 28rpx;
		color: #ececec;
		line-height: 33rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;

		.manageClan_info_name {
			font-weight: 400;
			font-size: 36rpx;
			line-height: 42rpx;
			color: #ffffff;
		}

		.manageClan_info_num {
			display: flex;
			align-items: center;

			image {
				width: 32rpx;
				height: 32rpx;
			}
		}
	}
}

.createClan_inputBox {
	margin: 0 32rpx 40rpx 32rpx;
	background: linear-gradient(225deg, #292b2a 0%, #8a918e 100%);
	border-radius: 8rpx;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 40rpx 32rpx 0 40rpx;
	box-sizing: border-box;

	.poster_bgc_list {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin: 0 178rpx 56rpx;
		gap: 32rpx;

		.poster_bgc {
			width: 40rpx;
			height: 40rpx;
		}
	}

	.createClan_input {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	::v-deep .u-form {
		width: 100%;
		padding-left: 10rpx;
		box-sizing: border-box;
	}

	::v-deep .input-placeholder {
		font-weight: 400;
		font-size: 28rpx;
		color: #999999 !important;
		line-height: 33rpx;
		text-align: right;
	}

	::v-deep .uni-input-input {
		font-weight: 400;
		font-size: 28rpx;
		color: #ffffff;
		line-height: 33rpx;
		text-align: right;
	}

	::v-deep .u-form-item__body__right__content__slot {
		display: flex !important;
		align-items: center !important;
		justify-content: flex-end !important;
	}

	::v-deep .u-form-item__body {
		padding: 0 !important;
		margin-bottom: 32rpx !important;
	}

	.placeHolder {
		font-weight: 400;
		font-size: 28rpx;
		color: #999999;
		line-height: 33rpx;
		text-align: right;
	}

	.value {
		color: #ffffff;
	}

	.arrow_right {
		width: 40rpx;
		height: 40rpx;
	}
}

.createClan_inputBox_intro {
	width: 100%;
	margin-top: 24rpx;

	::v-deep .placeholderClass {
		font-weight: 400 !important;
		font-size: 28rpx !important;
		color: #999999 !important;
		line-height: 33rpx !important;
	}

	::v-deep .u-textarea {
		background: rgba(255, 255, 255, 0.1) !important;
		padding: 32rpx 40rpx !important;
		box-sizing: border-box !important;
	}

	::v-deep .u-textarea__field {
		color: #fff !important;
		font-size: 28rpx !important;
		text-align: justify !important;
	}

	::v-deep .u-textarea__count {
		background: none !important;
		font-weight: 400 !important;
		font-size: 28rpx !important;
		color: #999999 !important;
		line-height: 33rpx !important;
		margin-right: 25rpx;
		margin-bottom: 24rpx;
		padding: 0;
	}
}

.createClan_inputBox_tip {
	font-weight: 400;
	font-size: 24rpx;
	color: #999999;
	line-height: 36rpx;
	justify-content: flex-start;
	margin-left: 32rpx;
	margin-top: -14rpx;
}

.clan_info_text {
	font-weight: 400;
	font-size: 28rpx;
	color: #ffffff;
	line-height: 42rpx;
	text-align: justified;
}
</style>
